"use client"
import Image from "next/image";
import React, { useState } from "react";

interface MyComponentProps {
  items: Array<{ alt?: string; img?: any; name?: string; icon?: string }>;
}

const SkillsFooter: React.FC<MyComponentProps> = ({ items }) => {
  const [failedIcons, setFailedIcons] = useState<Set<number>>(new Set());

  const handleImageError = (index: number) => {
    setFailedIcons(prev => new Set(prev).add(index));
  };

  const DefaultIcon = ({ name }: { name: string }) => (
    <div className="w-12 h-12 bg-gradient-to-br from-blue-400 to-purple-500 rounded-lg flex items-center justify-center">
      <span className="text-white font-bold text-lg">
        {name.charAt(0).toUpperCase()}
      </span>
    </div>
  );

  return (
    <>
      {items &&
        items.map((item, index) => {
          return (
            <div 
              key={index} 
              className="flex flex-col items-center justify-center gap-2 p-4 rounded-lg hover:bg-accent transition-colors"
            >
              {failedIcons.has(index) ? (
                <DefaultIcon name={item.name || 'Tech'} />
              ) : (
                <img 
                  src={item.icon} 
                  alt={item.name} 
                  className="w-12 h-12 object-contain"
                  onError={() => handleImageError(index)}
                  loading="lazy"
                />
              )}
              <span className="text-sm text-center font-medium text-muted-foreground">
                {item.name}
              </span>
            </div>
          );
        })}
    </>
  );
};

export default SkillsFooter;
